import { View, Text, Span } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'
import { Button } from '@nutui/nutui-react-taro'
import HomeIcon from "@assets/images/test.png";

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from '@store/counterSlice';
import { RootState } from '@store/index';

export default function Home () {
  // 获取状态
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();
  // 分发动作
  const handleIncrement = () => dispatch(increment());
  const handleDecrement = () => dispatch(decrement());
  const handleIncrementByAmount = (amount: number) => dispatch(incrementByAmount(amount));

  useLoad(() => {
    console.log('Page loaded.')
  })

  return (
    <View className='home'>
      <Span>Hello world!</Span>
      <img className='w-10 h-10' src={HomeIcon} />
      <Button onClick={handleIncrement}>+</Button>
      <Button onClick={handleDecrement}>-</Button>
      <Button onClick={() => handleIncrementByAmount(10)}>增加10</Button>
      <Text>当前计数: {count}</Text>
      <Button className='p-1' type='primary'>主要按钮</Button>
    </View>
  )
}
